<template>
  <div class="user">
    <el-button size="small" type="primary" @click="addModify('新增')">
      新增
    </el-button>
    <el-table :data="userData" border class="mar-t20" stripe>
      <el-table-column
        label="姓名"
        align="center"
        prop="name"
      ></el-table-column>
      <el-table-column
        label="所属部门"
        align="center"
        prop="department"
      ></el-table-column>
      <el-table-column
        label="手机号"
        align="center"
        prop="phone"
      ></el-table-column>
      <el-table-column
        label="登录名"
        align="center"
        prop="login_name"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.type"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-text="scope.row.type ? '禁用' : '启用'"
            @change="changeType(scope.row)"
          >
          </el-switch>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="addModify('修改')">修改</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text">删除</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="powerBtn(scope.row)">角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 接口权限弹框 -->
    <el-dialog
      title="用户角色"
      :visible.sync="userPowerPop"
      width="30%"
      :before-close="handleClose"
    >
    </el-dialog>
    <!-- 新增修改弹框 -->
    <el-dialog
      :title="popTitle + '用户'"
      :visible.sync="addModifyPop"
      width="30%"
      :before-close="handleClose"
    >
      <UserDetail v-if="addModifyPop"></UserDetail>
    </el-dialog>
  </div>
</template>
<script>
import { userJson } from "./userJson"
import UserDetail from "./components/user-detail"
export default {
  components: {
    UserDetail,
  },
  data() {
    return {
      userData: [],
      userPowerPop: false,
      addModifyPop: false,
      popTitle: "",
    }
  },
  mounted() {
    this.userData = userJson
  },
  methods: {
    // 用户禁用启用控制
    changeType(item) {
      console.log(item)
    },
    // 关闭弹窗
    handleClose(done) {
      done()
    },
    //打开角色弹框
    powerBtn(item) {
      console.log(item)
      this.userPowerPop = true
    },
    // 新增,修改
    addModify(name) {
      this.popTitle = name
      this.addModifyPop = true
    },
  },
}
</script>
